<template>
	<view class="select-goods" v-for="(item,index) in data.list" :key="index"
		@click="seLect(item.goods_title,item._id,item.goods_price,item.video_url,item.relation)">
		<view>
			<image :src="item.goods_cover" mode="aspectFill"></image>
		</view>
		<view>
			<text class="over-text line-clamp" :style="{color:(item.relation ? '#ccc':'')}">{{item.goods_title}}</text>
			<text :style="{color:(item.relation ? '#ccc':'')}">￥{{item.goods_price}}</text>
		</view>
	</view>
	<!-- 没有数据的提示 -->
	<view class="Tips" v-if="data.list.length == 0">
		你还没有商品数据
	</view>
	<!-- 上拉加载的提示 -->
	<view class="loading-hei" v-if="loading">
		<loadingvue></loadingvue>
	</view>
	<view style="height: 100rpx;">

	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue'
	import {
		onReachBottom,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		init
	} from '../../Acc-config/init'
	onMounted(() => {
		goods()
	})
	import loadingvue from '../public-view/loading.vue'
	const data = reactive({
		list: []
	})
	let obj = {
		goods_title: true,
		goods_cover: true,
		goods_price: true,
		video_url: true,
		seckill: true
	}
	// 获取商品数据
	const goods = async () => {
		let DB = await init()
		let res = await DB.database().collection('goods').where({
			shelves: true
		}).limit(10).field(obj).get()
		data.list = res.data
	}
	// 上拉加载
	const loading = ref(false)
	let page_n = ref(0)
	onReachBottom(async () => {
		loading.value = true
		page_n.value++
		let sk = page_n.value * 10
		let DB = await init()
		const res_goods = await DB.database().collection('goods').where({
			shelves: true
		}).limit(10).skip(sk).field(obj).get()
		data.list = [...data.list, ...res_goods.data]
		loading.value = false
	})
	// 选中关联上坪
	import {
		select_goods
	} from '../../Acc-config/answer'
	import {
		Feedback
	} from '../../Acc-config/media'
	const seLect = (goods_title, goods_id, goods_price, video_url, relation) => {
		if (relation) {
			new Feedback("该商品已被关联", 'none').toast()
			return
		}
		select_goods.value = {
			goods_title,
			goods_id,
			goods_price,
			video_url
		}
		wx.navigateBack({
			delta: 1
		})
	}
	// 接收上个页面传递过来的值
	const res_data = reactive({
		data: []
	})
	onLoad((event) => {
		res_data.data = JSON.parse(event.ref_id)
		console.log(event)
	})
	// 监听器
	watch(() => data.list, (newVal, oldVal) => {
		for (let i = 0; i < res_data.data.length; i++) {
			let index = newVal.findIndex(item => item._id == res_data.data[i])
			if (index >= 0) {
				data.list[index]['relation'] = true
			}
		}
	})
</script>
<style scoped>
	.select-goods {
		display: flex;
		height: 200rpx;
		margin: 30rpx;
	}

	.select-goods image {
		width: 200rpx;
		height: 200rpx;
		display: block;
		border-radius: 10rpx;
	}

	.select-goods view:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: bold;
		padding: 10rpx 0 10rpx 15rpx;
	}

	.select-goods view text:nth-child(2) {
		color: #1AAD19;
		font-size: 35rpx;
	}

	.line-clamp {
		-webkit-line-clamp: 2 !important;
	}
</style>